<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点学苑</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">

<!-- 引入JQuery -->
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- vue -->
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<!-- 引入页头组件 -->
<script src="js/top.js"></script>
<script src="js/category.js"></script>

<!-- layui -->
<link rel="stylesheet" href="webjars/layui/2.5.6/css/layui.css"
	media="all">
</head>

<body>
<!-- 页头 -->
<div class="head-box">
    <div class="head wrap" id="cate">
          <div class="logo fl"><a href=""><img src="images/logo.png"></a></div>
          <div class="head-right fr">
              <div class="head-a fr">
             
                   <div class="hgt fl"><img src="images/hgt.png">
                         <div class="hgt-top">
                             <input type="text" class="hgt-text">
                         </div>
                   </div>
                   <!-- <div class="head-a1 fl"><a href=""><img src="images/tb-a.png"></a></div>
                   <div class="head-a1 fl"><a href=""><img src="images/tb-b.png"></a></div>
                   <div class="head-a3 login-click fl">登录</div>
                   <div class="head-a4 reg-click fl">注册</div> -->
              
              </div>
               <top></top>
              <div class="clearfix"></div>
              <div class="nav fr" >
                  <ul>
                       <li><a href="index.html">首页</a></li>
                       <li class="nav-cut"><a href="">文章</a>
                          <category></category>
                       </li>
                       <li><a href="community.html">社区</a></li>
                       <li><a href="course.html">课程</a></li>
                       <li><a href="active.html">活动</a></li>
                       <li><a href="contact.html">联系我们</a></li>
                  
                  </ul>
              </div>
             
              <div class="clearfix"></div>
          </div>
    </div>
     <script type="text/javascript">
	var v2 = new Vue({
		el : "#cate"
	})

</script>
</div>



<div class="content" >
    <div class="wrap" >
          <div class="art-height"></div>
          <div class="art-box" id="sarticle">
                <div class="art-b">
                    <a href=""><div class="art-b1 mr-30 fl"><img src="aimage/yq1.jpg">
                                     <div class="art-inside">让简单变有趣创意错觉摄影作品欣赏</div>
                               </div></a>
                     <a href=""><div class="art-b1 fl"><img src="aimage/yq2.jpg">
                                     <div class="art-inside">儿童摄影：一些有趣的拍摄想法</div>
                               </div></a>          
                
                </div>

                <div class="art-c" >
                        <div class="art-cll fl">
                               <div class="ru-title art-title">
<!--                                        <div class="cou-b1"><img src="images/cou-b1.jpg">焦点文章</div> -->
                                       <div class="ru-a1">
                                             <div class="sort">排序</div>
                                       </div>
                                       <div class="ru-a2">
                                             <div class="dropdown">
                                                    <span>情感</span>
                                                     <ul data-value="" class="droplist">
                                                                <li data-id="1">全部</li>
                                                                <li data-id="2">服饰</li>
                                                                <li data-id="3">最新</li>
                                                                <li data-id="4">提问</li>
                                                                <li data-id="5">约会技巧</li>
                                                                <li data-id="6">热门文章</li>
                                                     </ul>
                                             </div>
                                       </div>
                               </div>
                               
								<!-- 文章板块 -->
								<div class="tjk" >
                                    <ul class="art-ul" >
                                        <li v-for="m in arts"><a :href="'article-details.html#'+ m.tid"><div class="art-list">
                                                          <div class="art-d fl"><img :src="m.aimg" weight=150px width=150px></div>
                                                          <div class="art-e fl">
                                                                <div class="col-b1" >{{m.atitle}}</div>
                                                                <div class="col-b2" >焦点学苑<span>{{m.tdate}}</span></div>
                                                                <div class="col-b3" >{{m.introduction}}</div>
                                                          </a></div>
                                                          <div class="art-f">
                                                                <span><img src="images/col-c1.jpg">{{m.replysnumber}}</span>
                                                                			·<!-- 将文章的tid作为参数给chekLogin方法传参 -->
                                                                <span><img @click.prevent="collect(m.tid)" src="images/col-c2.jpg" id="collect">{{m.likenumber}}</span>
                                                                <em><img src="images/col-c3.jpg"></em>
                                                                <em><img src="images/col-c4.jpg"></em>
                                                                <em><img src="images/col-c5.jpg"></em>
                                                          </div>
                                                 </div>
                                                 <div class="art-g"></div>
                                                          
                                          </li>
                                          
                                    </ul>
                                    
                           
                               </div>
                               

<!--                                结尾部分 -->
                               <div class="more">
                               <div id="demo1" ></div>
	
<!--                                <a href="">查看更多>></a> -->
                               </div>
                               
                        <!--登录注册弹窗-->
<div class="mask"></div>
<div class="login">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close"></div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="注册时填写的用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="login" type="button" class="login-btn" value="登录"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
             <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>

<div class="reg">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="regist"  type="button" class="login-btn" value="注册"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
        </div>
    </div>
</div>
                        </div>
                        
                <!--art-c-->
          
          </div>

</div>
     
     
<script src="webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
<script type="text/javascript">
 
</script>
<script type="text/javascript">
	var v1 = new Vue({
		el: "#sarticle",	
		data :{
			arts :[],
			//vue花括号中可以不写 	
			user:{uname:"",upass:""},
			jpg:"",
			total :0,
			//uid:"",
		},
		created(){
			let url="article/searcharticle.s?page=1&size=10&cid="+location.search.replace(/\?page=(\d+)&size=(\d+)&cid=(\d+)/,"$3");
			axios.get(url).then(res=>{
				this.arts =res.data.list;
				this.total=res.data.total;
				console.log(this.total)
				
				layui.laypage.render({
				    elem: 'demo1'
				    ,count: res.data.total //数据总数
				    ,jump: obj=>{
				    	url="article/searcharticle.s?page="+obj.curr+"&size=10&cid="+location.search.replace(/\?page=(\d+)&size=(\d+)&cid=(\d+)/,"$3");
				    	axios.get(url).then(res=>{
				    		this.arts =res.data.list;
				    		
				    	});
				    }
				  });
			});
			
		},
		methods:{
			collect(tid){
				console.info(tid);
				var params = new URLSearchParams();
				console.info("dasfsa");
				axios.post("checkLogin.s",params).then(res=>{
					if((res.data.code)==0){
						//$(".mask,.login").show();
						
					        $(".mask").css({
					            display: "block", height: $(document).height()
					        });
							 var $box = $('.login');
					        $box.css({
					           display: "block"
					        });
							$(".close").click(function () {
					        $(".mask,.login").css("display", "none");
					       });
								
					}else{
						params.append("tid",tid);
						axios.post("collect.s",params).then(res=>{
							console.info(res);
							alert(res.data);
							location.reload();
							//location.href="article.html?page=1&size=5&cid=2";
						})
					}
				})
			},
			login(){
				console.info("xx");
				var params = new URLSearchParams();
				params.append("username",this.user.uname);
				params.append("password",this.user.upass);
				
				axios.post("userHead.s",params).then(res=>{
					
					console.log(res.data)
					this.jpg=res.data.ujpg;
				});
				axios.post("user/login.s",params).then(res=>{
					 if(res.data.uid){
							//关闭div
							$(".mask,.login").css("display", "none");
							$("#loginA").hide();
							location.href="article.html";
						}else{
							
							alert(res.data.msg);
						} 
				})
			},
			regist(){
				var params = new URLSearchParams();
				params.append("username",this.user.uname);
				params.append("password",this.user.upass);
				axios.post("user/regist.s",params).then(res=>{
					if(res.data.code){
						alert("注册成功！");
						$(".msk,.reg").css("display","none");
						
					}else{
						alert(res.data.msg);
						
					}
				})
			},
		},
	})
	

</script>



<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">网页制作by云邦</div>    
   </div>
</div>




<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script>
   $(".sort").click(function(){
	   $(this).toggleClass("sort-cut")  
	})
</script>
<script>
   $(".dropdown").bind({
	    click: function () {
	        $(this).find(".droplist").stop().slideDown();
	    },
	    mouseleave: function () {
	        $(this).find(".droplist").hide();
	    }
	});
	$(".dropdown .droplist li").click(function () {
	    $(this).parents(".dropdown").children("span").text($(this).text());
	    $(this).parents(".droplist").hide().attr("data-value", $(this).attr("data-id"));
	});
</script>

</body>
</html>

